<template>
  <div class="tableCom">
    <div class="tableHead">
      <div class="tableHeadItem" v-for="(item,index) in head" :key="index" :style="{flex:item.flex}">{{ item.title }}
      </div>
    </div>
    <vue-seamless-scroll :data="list" :class-option="defaultOption" class="tableBody">
      <div class="tableBody2" v-for="(item, index) in list" :key="'item-' + index">
        <div
          v-for="(head, headIndex) in head"
          :key="'head-' + headIndex"
          class="tableBody2Item"
          :style="{flex: head.flex}"
        >
          <span
        class="num"
        :title="item[head.id]"
        style="width: 80px;"
        @click="click(item)"
        v-if="head.id === 'details'"
        :class="{ 'detail-style': head.id === 'details' }"
      >

        {{ item[head.id] }}
      </span>
          <span
            class="num"
            :title="item[head.id]"
            style="width: 80px;"
            @click="click(item)"
            v-else-if="head.id === 'warningLevelName'"
            :style="{ 'color': item.color }"
          >

        {{ item[head.id] }}
      </span>
          <span
            v-else
            class="num"
            :title="item[head.id]"
            style="width: 80px;"
            :class="{ 'detail-style': head.id === 'details' }"
          >

        {{ item[head.id] }}
      </span>
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
  import VueSeamlessScroll from 'vue-seamless-scroll';

  export default {
    name: "tableCom",
    components: {VueSeamlessScroll},
    props: {
      head: {
        type: Array,
        default() {
          return [];
        }
      },
      list: {
        type: Array,
        default() {
          return [];
        }
      },
    },
    data() {
      return {}
    },
    computed: {
      defaultOption() {
        return {
          step: 0.4, // 数值越大速度滚动越快
          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
    mounted() {
    },
    methods: {
      click(data) {
        let row = data
        this.$router.push({
          path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`,
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .tableCom {
    width: calc(100% - 30px);
    margin-left: 15px;
    position: relative;
    height: calc(100% - 0px);
    overflow: hidden;

    .tableHead {
      width: 100%;
      height: 40px;
      position: relative;
      //background: rgba(48, 142, 255, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      background: url("./assets/headerTopBg.png");
      background-size: 100% 100%;

      .tableHeadItem {
        font-size: 14px;
        font-family: MiSans;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        flex: 1;
      }
    }

    .tableBody {
      position: relative;
      height: calc(100% - 40px);
      overflow: hidden;

      .tableBody2 {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        position: relative;

        .line_left_bottom {
          width: 8px;
          height: 2px;
          background: #04CEF7;
          position: absolute;
          left: 0;
          bottom: 0;
        }

        .line_right_bottom {
          width: 8px;
          height: 2px;
          background: #04CEF7;
          position: absolute;
          right: 0;
          bottom: 0;
        }

        .tableBody2Item {
          font-size: 14px;
          font-family: MiSans;
          font-weight: 400;
          color: #CCD9E5;
          height: 100%;
          text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          flex: 1;

          .num {
            width: calc(100% - 0px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
          }

        }
      }

      .tableBody2:nth-child(2n) {
        background: url("./assets/ItemBg.png") center bottom no-repeat;
        background-size: 100% 100%;
      }

    }
  }

  .detail-style {
    font-size: 14px;
    font-family: MiSans;
    font-weight: 400;
    color: #00FCFF;
    cursor: pointer;
  }
</style>
